<script setup>
import { parseSizeString, parseStyle } from '../common/index'

const props = defineProps({
    name : {
        type : String,
        default : ''
    },
    size : {
        type : [String,Number],
        default : '16px'
    },
    color : {
        type : String,
        default : '#1f1f1f'
    },
    unit : {
        type : String,
        default : 'px'
    },
    iconStyle : {
        type : [Object,String],
        default : ''
    }
})

const emit = defineEmits(['click'])

const handleClick = () => {
    emit('click')
}
</script>

<template>
    <svg
        :style="{
            fontSize: parseSizeString(size,unit),
            color: color,
            ...parseStyle(iconStyle)
        }"
        :class="`icon ${name === 'loading' ? 'loading-rotate' : ''}`"
        aria-hidden="true"
    >
        <use :xlink:href="`#icon-${name}`"></use>
    </svg>
</template>

<style lang="scss">
.loading-rotate {
  animation: loadRotate 2s infinite linear;
}

@keyframes loadRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
